<template>
    <el-dialog
        :before-close="handleClosePreview"
        :visible.sync="previewVisible"
        width="80%"
        custom-class="dialog-view-box"
    >
        <div class="task-content" id="editor-subject">
            <textarea id="appendSubject" style="display: none"></textarea>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="htmlToPdf">导出PDF</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { markdownToHtmlSubject, downloadPDF } from "@/utils/htmlToPdf1.js";

export default {
    props: ["previewVisible", "contractTempContent", "contractName"],
    data() {
        return {};
    },
    watch: {
        //查看
        contractTempContent(val) {
            if (val) {
                this.$nextTick(() => {
                    markdownToHtmlSubject(this.contractTempContent);
                });
            }
        },
    },
    methods: {
        handleClosePreview() {
            this.$emit("update:previewVisible", false);
        },
        //转pdf
        htmlToPdf() {
            const loading = this.$loading({
                lock: true,
                text: "下载中...",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            const ele = document.getElementById("editor-subject");
            const name = this.contractName || "合同";
            downloadPDF(ele, name)
                .then(() => {
                    this.$message({
                        message: "下载成功",
                        type: "success",
                    });
                })
                .catch((err) => {
                    this.$message({
                        message: "下载失败",
                        type: "error",
                    });
                })
                .finally(() => {
                    loading.close();
                    this.$emit("update:previewVisible", false);
                });
        },
    },
};
</script>

<style>
.dialog-view-box {
    height: 90%;
    overflow-y: auto;
}
</style>
